<template>
  <a-modal v-model:visible="visible" width="90%" :mask-closable="false" @ok="save" @cancel="close">
    <template #title>
      <span style="font-size: 24px">{{ areaNname }}</span>
    </template>
    <a-descriptions :column="1" :label-style="{ width: '200px' }" :value-style="{ height: '80px' }">
      <a-descriptions-item label="区域点位数量:">
        <div style="border-bottom: 3px solid #ccc">
          <span style="font-size: 30px; font-weight: 500; color: #cf0303">{{ areaPointData.areaPoints_number }}</span>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="设置条桶数量:">
        <a-select size="large" v-model.trim="areaPointData.areaPoint_set" value-key="value">
          <a-option v-for="item of numberOptions" style="zoom: 2" :value="item.value" :label="item.label" />
        </a-select>
      </a-descriptions-item>
      <a-descriptions-item label="点位状态追溯:">
        <div class="table">
          <a-scrollbar style="height: 200px; overflow: auto">
            <a-table
              :loading="loading"
              :columns="columns"
              :data="taskDetailList"
              :pagination="false"
              stripe
              size="large"
              :bordered="{ cell: true }"
              :scroll="{ x: '100%', y: '100%' }"
            >
              <template #action="{ record }">
                <a-space>
                  <a-popconfirm type="warning" content="确定删除该条数据吗?" position="top" @before-ok="onDelete(record)">
                    <a-button type="primary" status="danger" :disabled="record.disabled">
                      <template #icon><icon-delete :size="20" /></template>
                      <span>删除</span>
                    </a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </a-table>
          </a-scrollbar>
        </div>
      </a-descriptions-item>
    </a-descriptions>
    <template #footer>
      <div class="footer">
        <a-button @click="close" style="width: 48%; height: 50px; font-size: 28px; color: #fff; background-color: #ccc">取消</a-button>
        <a-button type="primary" @click="save" style="width: 48%; height: 50px; font-size: 28px">确认</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import useMainStore from '../../../store/main/main'
import { storeToRefs } from 'pinia'
const mainStore = useMainStore()
const { taskDetailList } = storeToRefs(mainStore)
const areaPointData = ref({
  areaPoints_number: '满桶区',
  areaPoint_set: 1
})
const areaNname = ref('')
const area = ref()
const visible = ref(false)
const numberOptions = ref()
function setAreaPointModalVisible(item, index) {
  area.value = item
  mainStore.getTaskDetail(item.point[index - 1])
  if (index == 0) {
    areaNname.value = item.area_name
  } else {
    areaNname.value = item.area_name + '-' + index + '号点'
  }
  let count = 0
  item.point.forEach((element) => {
    if (element.pstatus_point != '无桶') {
      count++
    }
  })
  areaPointData.value.areaPoints_number = count + '/' + '总配置数' + item.point.length
  if (index == 0) {
    areaPointData.value.areaPoint_set = 0
  } else {
    areaPointData.value.areaPoint_set = index
  }

  const arr = []
  for (let i = 0; i <= item.point.length; i++) {
    arr.push({ label: i.toString(), value: i })
  }
  numberOptions.value = arr
  visible.value = true
}
const save = () => {
  mainStore.getAreaPointEdit(Object.assign({}, area.value, areaPointData.value)).then(() => {
    Message.success('编辑成功')
    visible.value = false
  })
}

const columns = [
  {
    title: '起点梳棉机',
    dataIndex: 'task_start_in',
    align: 'center'
  },
  { title: '送桶AGV', dataIndex: 'robot_id', align: 'center' },
  {
    title: '送达时间',
    dataIndex: 'task_time_update',
    align: 'center'
  }
]
const close = () => {
  mainStore.getAreaList()
  visible.value = false
}

defineExpose({ setAreaPointModalVisible })
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-item-label-block) {
  color: #121314;
  font-size: 26px;
}
:deep(.arco-select-view-single.arco-select-view-size-large .arco-select-view-value) {
  font-size: 26px;
  font-weight: 500;
  color: #cf0303;
}
:deep(.arco-table-th) {
  background-color: #1c62bb;
}
:deep(.arco-btn-size-medium) {
  height: 40px;
  // width: 140px;
  // padding: 8px 20px;
  font-size: 20px;
}
:deep(.arco-table-th-title) {
  font-size: 24px;
  color: #fff;
}
:deep(.arco-table-td-content) {
  font-size: 24px;
}
.footer {
  display: flex;
  justify-content: space-between;
}
.openClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.prohibitClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: none;
  border-radius: 5px;
  background-color: #cf0303;
  color: #fff;
}
.openClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.prohibitClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.openClick-bucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.openbucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
</style>
